import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Select, Card, Row, Col, Statistic, Tabs, DatePicker } from 'antd';
// 引入 ECharts 库
import * as echarts from 'echarts'; 

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;

// 模拟图表数据
const homeworkVolumeData = [
    { date: '06-27', value: 235 },
    { date: '06-28', value: 265 },
    { date: '06-29', value: 225 },
    { date: '06-30', value: 260 },
    { date: '07-01', value: 270 },
    { date: '07-02', value: 250 },
    { date: '07-03', value: 240 },
];

const accuracyData = [
    { date: '06-27', value: 0.85 },
    { date: '06-28', value: 0.88 },
    { date: '06-29', value: 0.82 },
    { date: '06-30', value: 0.90 },
    { date: '07-01', value: 0.91 },
    { date: '07-02', value: 0.89 },
    { date: '07-03', value: 0.87 },
];

/**
 * 自定义 Hook，用于管理 ECharts 实例的生命周期
 * @param {React.RefObject<HTMLElement>} chartRef - 图表容器的 ref
 * @param {echarts.EChartsOption} options - ECharts 配置项
 */
const useECharts = (chartRef, options) => {
    useEffect(() => {
        if (!chartRef.current) return;

        const chartInstance = echarts.init(chartRef.current);
        chartInstance.setOption(options);

        const handleResize = () => chartInstance.resize();
        window.addEventListener('resize', handleResize);

        return () => {
            window.removeEventListener('resize', handleResize);
            chartInstance.dispose();
        };
    }, [chartRef, options]);
};

export default function Status() {
    const [filters, setFilters] = useState({
        xd: '小学',
        grade: '一年级',
        cla: '一班',
        subject: '语文'
    });
    // 用于作业量柱状图的 DOM 引用
    const barChartRef = useRef(null); 
    // 用于正确率折线图的 DOM 引用
    const lineChartRef = useRef(null); 

    const updateFilter = (key, value) => {
        setFilters(prev => ({ ...prev, [key]: value }));
    };

    // 缓存图表配置
    const barChartOptions = useMemo(() => ({
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: homeworkVolumeData.map(item => item.date) },
        yAxis: { type: 'value', name: '题数' },
        series: [{ name: '作业量', type: 'bar', data: homeworkVolumeData.map(item => item.value) }]
    }), []);

    const lineChartOptions = useMemo(() => ({
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: accuracyData.map(item => item.date) },
        yAxis: { type: 'value', min: 0, max: 1, axisLabel: { formatter: (value) => `${(value * 100).toFixed(0)}%` } },
        series: [{ name: '正确率', type: 'line', smooth: true, data: accuracyData.map(item => item.value) }]
    }), []);

    // 使用 Hook 初始化图表
    useECharts(barChartRef, barChartOptions);
    useECharts(lineChartRef, lineChartOptions);

    return (
        <div style={{ background: '#f0f2f5', padding: '24px' }}>
            <Card>
                <h2 style={{ marginBottom: '20px' }}>作业统计</h2>

                {/* 筛选区域 */}
                <div style={{ display: 'flex', gap: '20px', marginBottom: '20px', alignItems: 'center', flexWrap: 'wrap' }}>
                    <div>
                        <span>学段：</span>
                        <Select value={filters.xd} style={{ width: 120 }} onChange={(value) => updateFilter('xd', value)} options={[{ value: '小学', label: '小学' }, { value: '初中', label: '初中' }]} />
                    </div>
                    <div>
                        <span>年级：</span>
                        <Select value={filters.grade} style={{ width: 120 }} onChange={(value) => updateFilter('grade', value)} options={[{ value: '一年级', label: '一年级' }, { value: '二年级', label: '二年级' }]} />
                    </div>
                    <div>
                        <span>班级：</span>
                        <Select value={filters.cla} style={{ width: 120 }} onChange={(value) => updateFilter('cla', value)} options={[{ value: '一班', label: '一班' }, { value: '二班', label: '二班' }]} />
                    </div>
                    <div>
                        <span>学科：</span>
                        <Select value={filters.subject} style={{ width: 120 }} onChange={(value) => updateFilter('subject', value)} options={[{ value: '语文', label: '语文' }, { value: '数学', label: '数学' }]} />
                    </div>
                </div>

                {/* 统计卡片区域 */}
                <Row gutter={16} style={{ marginBottom: '20px' }}>
                    <Col xs={24} sm={12} md={6}>
                        <Card bordered={false} style={{ textAlign: 'center', background: '#fafafa' }}>
                            <Statistic title="学生人数" value={3500} />
                        </Card>
                    </Col>
                    <Col xs={24} sm={12} md={6}>
                        <Card bordered={false} style={{ textAlign: 'center', background: '#fafafa' }}>
                            <div style={{ color: 'rgba(0, 0, 0, 0.45)', fontSize: '14px' }}>作业总量</div>
                            <Row gutter={8} align="bottom" justify="center" style={{ marginTop: '8px' }}>
                                <Col>
                                    <Statistic value={234400} valueStyle={{ fontSize: '24px' }} />
                                    <div style={{ color: 'rgba(0, 0, 0, 0.45)', fontSize: '12px' }}>已完成</div>
                                </Col>
                                <Col>
                                    <Statistic value={634400} valueStyle={{ fontSize: '24px' }} />
                                    <div style={{ color: 'rgba(0, 0, 0, 0.45)', fontSize: '12px' }}>总量</div>
                                </Col>
                            </Row>
                        </Card>
                    </Col>
                    <Col xs={24} sm={12} md={6}>
                        <Card bordered={false} style={{ textAlign: 'center', background: '#fafafa' }}>
                            <Statistic title="平均用时" value={'35分钟'} />
                        </Card>
                    </Col>
                    <Col xs={24} sm={12} md={6}>
                        <Card bordered={false} style={{ textAlign: 'center', background: '#fafafa' }}>
                            <Statistic title="平均难度" value={0.68} precision={2} />
                        </Card>
                    </Col>
                </Row>

                {/* 图表标签页区域 */}
                <Tabs
                    defaultActiveKey="1"
                    tabBarExtraContent={
                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                            <span>自定义时间范围：</span>
                            <RangePicker />
                        </div>
                    }
                >
                    <TabPane tab="七日内数据统计" key="1">
                        <div style={{ marginTop: '20px' }}>
                            <h4 style={{ marginLeft: '20px' }}>作业量</h4>
                            {/* 作业量柱状图容器 */}
                            <div ref={barChartRef} style={{ width: '100%', height: '300px' }} /> 
                        </div>
                        <div style={{ marginTop: '40px' }}>
                            <h4 style={{ marginLeft: '20px' }}>正确率</h4>
                            {/* 正确率折线图容器 */}
                            <div ref={lineChartRef} style={{ width: '100%', height: '300px' }} /> 
                        </div>
                    </TabPane>
                    <TabPane tab="30日数据统计" key="2">
                        <div style={{ padding: '20px' }}>30日数据正在开发中...</div>
                    </TabPane>
                </Tabs>
            </Card>
        </div>
    );
}